<script lang = "ts" setup>
import { reactive, ref } from "vue"
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { VueElement } from 'vue';
import routes from "../../routes";
import AccountService from "../../stores/AccountService.js"

// 创建一个表单引用对象，用于操作表单
const registerAccountRef = ref<FormInstance>()

//表单元素
let registerAccount = reactive({
  username : '',
  password : '',
  Resetpassword : '',
  email : '',
  phone : '',
  address1 : '',
  address2 : '1',
  firstName: '1',
  lastName: '1',
  status: '1',
  city: '1',
  state: '1',
  zip: '1',
  country: '1',
  languagePreference: 'ENGLISH',
  favouriteCategoryId: 'DOGS',
  listOption: true,
  bannerOption: true,
  bannerName:'1',
})
//用户名不能为空的验证
const validateUserName = (rule: any, value: any, callback: any)=> {
  // console.log(value)
  if (value === '') {
    callback(new Error('用户名不能为空！'))
  }else{
    callback()
  }
}
//密码自定义验证
const validatePass = (rule: any, value: any, callback: any)=> {
  if (value === '') {
    callback(new Error('密码不能为空！'))
  }else{
    callback()
  }
}
//确认密码的验证
const validatePass2 = (rule: any, value: any, callback: any)=> {
  if (value === '') {
    callback(new Error('请再次输入密码！'))
  }else if(value !== registerAccount.password){
    callback(new Error('两次输入密码不一致！'))
  }else{
    callback()
  }
}
//邮箱的验证
const validateEmail = (rule: any, value: any, callback: any)=> {
  if (value === '') {
    callback(new Error('邮箱不能为空'))
  }else{
    callback()
  }
}
//手机的验证
const validatePhone = (rule: any, value: any, callback: any)=> {
  if (value === '') {
    callback(new Error('手机号不能为空！'))
  }else{
    callback()
  }
}
//地址的验证
const validateAddress1 = (rule: any, value: any, callback: any)=> {
  if (value === '') {
    callback(new Error('请输入地址！'))
  }
}
// const validateAddress2 = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入地址！'))
//   }
// }
// const validateFirstName = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入姓氏！'))
//   }
// }
// const validateLastName = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入名字！'))
//   }
// }
// const validateStatus = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入Status！'))
//   }
// }
// const validateCity = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入城市！'))
//   }
// }
// const validateState = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入state！'))
//   }
// }
// const validateZip = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入邮政编码！'))
//   }
// }
// const validateCountry = (rule: any, value: any, callback: any)=> {
//   if (value === '') {
//     callback(new Error('请输入国家！'))
//   }
// }

// 自定义验证（验证要写声明在上面）
const rules = reactive<FormRules>({
  username: [{ validator: validateUserName, trigger: 'blur' }],
  password: [{ validator: validatePass, trigger: 'blur' }],
  Resetpassword: [{ validator: validatePass2, trigger: 'blur' }],
  email: [{ validator: validateEmail, trigger: 'blur' }],
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  addr1: [{ validator: validateAddress1, trigger: 'blur' }],
  // addr2: [{ validator: validateAddress2, trigger: 'blur' }],
  // firstName: [{ validator: validateFirstName, trigger: 'blur' }],
  // lastName: [{ validator: validateLastName, trigger: 'blur' }],
  // status: [{ validator: validateStatus, trigger: 'blur' }],
  // city: [{ validator: validateCity, trigger: 'blur' }],
  // state: [{ validator: validateState, trigger: 'blur' }],
  // zip: [{ validator: validateZip, trigger: 'blur' }],
  // country: [{ validator: validateCountry, trigger: 'blur' }],
})

const register  = async (registerAccount)=>{
  const [err, res] = await AccountService.promise_process(AccountService.register(registerAccount));
  if(err){
    console.log(err)
    alert(JSON.stringify(registerAccount))
    ElMessage({
      message: '请求服务器失败',
      type: 'error',
    })
  }
  if(res){
    console.log(res)
    routes.push('/login')
  }
}

</script>

<template>
  <Top/>
  <div class="registerOn">
      <h2>注册</h2>
      <el-divider />
      <el-form class="form" :model="registerAccount"
                            ref="registerAccountRef"
                            status-icon
                            :rules="rules"
                            >

          <!-- 账号及用户名区域 -->
          <el-form-item label="账号" style="margin-bottom: 10%"  prop="username">
              <el-input v-model="registerAccount.username" type="text" placeholder="请输入您的用户名">
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码区域 -->
            <el-form-item label="密码" style="margin-bottom: 10%"  prop="password">
              <el-input v-model="registerAccount.password"
                type="password"
                placeholder="请输入您的密码"
                show-password>
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 确认密码区域 -->
            <el-form-item label="确认" style="margin-bottom: 10%" prop="Resetpassword">
              <el-input v-model="registerAccount.Resetpassword"
                type="password"
                placeholder="请重新输入您的密码"
                show-password>
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 邮箱区域 -->
            <el-form-item label="邮箱" style="margin-bottom: 10%" prop="email">
              <el-input v-model="registerAccount.email"
                type="text"
                placeholder="请输入您的邮箱">
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!--  电话区域 -->
            <el-form-item label="电话" style="margin-bottom: 10%" prop="phone">
              <el-input v-model="registerAccount.phone"
                type="text"
                placeholder="请输入您的电话">
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 地址区域 -->
            <el-form-item label="地址" style="margin-bottom: 10%" prop="address">
              <el-input v-model="registerAccount.address1"
                type="text"
                placeholder="请输入您的地址">
                <template #prefix>
                  <el-icon><Location /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          <el-form-item style="margin-bottom: 10%">

            <!-- 按钮区域 -->
              <el-button
                  type="success"
                  plain
                  style="margin-left: 25%; width: 50%;margin-bottom: 5%;"
                  @click="register(registerAccount)"
                  >
                  注册
                  </el-button>
                  <el-button
                  type="info"
                  plain
                  style="margin-left: 25%; width: 50%"
                  @click="routes.push('/login')">
                  返回登录
                  </el-button>
            </el-form-item>
      </el-form>
  </div>
  <Bottom/>
</template>

<style scoped>
</style>


